<template>
	<view class="pages">
		<scroll-view scroll-y="true" class='contentbox' @scrolltolower="scrolltolower">
			<view class="searchbox">
				<u-search @search="handleinput" @clear="handleclear" placeholder="搜索" v-model="search"
					:clearabled="true" bgColor="#E2867E" color="#fff" searchIconColor="#fff" borderColor="#fff"
					placeholderColor="#fff" :showAction="false"></u-search>
			</view>
			<u-swiper :list="list1" keyName="image" height="173" radius="0" :indicator="true" indicatorMode="dot"></u-swiper>
			<view class="listtitle">表白套餐</view>
			
			<view v-if="list.length == 0">
				<view style="height: 100rpx;"></view>
				<u-empty text=" - 暂无数据 - " mode="list"></u-empty>
			</view>
			<view class="boxes">
				<view class="boxesItem" v-for="(item,index) in list" :key="index" @click="detail(item.id,item.image)">
					<image class="icon" :src="item.image" mode=""></image>
					<view class="b2">
						<view>{{item.name}}</view>
						<view>套餐描述：{{item.detail}}</view>
						<view>￥{{item.sell_price}}</view>
					</view>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list1: [
					// 'https://cdn.uviewui.com/uview/swiper/swiper1.png',
					// 'https://cdn.uviewui.com/uview/swiper/swiper2.png',
					// 'https://cdn.uviewui.com/uview/swiper/swiper3.png',
				],
				
				search: '',
				page: 1,
				limit: 20,
				length: true,
				list: [
					// {id:'1'},
					// {id:'2'},
					// {id:'3'},
				],
				
			}
		},
		onLoad() {
			
		},
		methods: {
			async getData() {
				this.$forceUpdate(); //强制组件更新
				this.getlunbo();
				this.page = 1;
				this.list = [];
				this.getList();
			},
			async getlunbo() {
				let res = await this.$api.getlunbo();
				if (res.code == 1) {
					this.list1 = res.data;
				}
			},
			// 搜索
			handleinput(e) {
				console.log(this.search);
				this.page = 1;
				this.list = [];
				this.getList()
			},
			// 清空
			handleclear() {
				console.log('清除');
				this.page = 1;
				this.list = [];
				this.getList()
			},
			// 上拉
			scrolltolower() {
				console.log('触底')
				if (this.length) {
					this.page++
					this.getList();
				}
			},
			// 列表
			async getList() {
				let res = await this.$api.getindex({
					page_no: this.page,
					page_size: this.limit,
					name: this.search
				});
				if (res.code == 1) {
					this.length = res.data.lists.length == this.limit;
					this.list.push(...res.data.lists);
				}
			},
			// 详情
			detail(id,img){
				if(!uni.getStorageSync("token")){
					this.Login()
					return
				}
				uni.navigateTo({
					url:'/pages/index/rooms/rooms?id='+id+'&img='+img
				})
			},
			// 登录
			Login() {
				uni.showModal({
					title: '温馨提示',
					content: '您还未登录，请登录后操作！',
					cancelColor: '#B3B3B3',
					confirmText: '去登录',
					confirmColor: '#E2867E',
					success: function(res) {
						if (res.confirm) {
							uni.navigateTo({
								url: '/pages/login/login'
							})
						} else if (res.cancel) {
			
						}
					}
				});
			},
		}
	}
</script>

<style scoped lang="scss">
	.pages {
		position: absolute;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
		overflow: hidden;
		display: flex;
		flex-direction: column;
	}

	.contentbox {
		flex: 1;
		overflow: hidden;
		padding-bottom: 160upx;

		.searchbox {
			background: #E2867E;
			padding: 30rpx;
			margin-top: 0;

			.searchinput {
				border-radius: 35rpx;
				border: 1px solid #fff;
				padding: 10rpx 30rpx;
			}
		}
		
		.listtitle{
			width: 200rpx;
			height: 40rpx;
			line-height: 40rpx;
			margin:20rpx auto;
			font-size: 26rpx;
			background-color: #E2867E;
			color: #AA3128;
			text-align: center;
			border-radius: 5rpx;
		}
		
		.boxes{
			display: flex;
			flex-wrap: wrap;
			padding: 0 12upx;
			box-sizing: border-box;
			
			.boxesItem {
				width: 350upx;
				height: 536upx;
				background: #FFFFFF;
				box-shadow: 0px 1px 10px 0px rgba(0, 0, 0, 0.1);
				border-radius: 5upx;
				overflow: hidden;
				margin-bottom: 20upx;
				margin-right: 25upx;
				
				.icon{
					width: 350rpx;
					height: 350rpx;
				}
				
				.b2 {
					margin: 0 30rpx;
					flex: 1;
					view {
						&:nth-child(1) {
							font-size: 28rpx;
							color: #000;
							font-weight: bold;
						}
				
						&:nth-child(2) {
							font-size: 20rpx;
							color: #525252;
							margin: 10rpx 0;
							overflow: hidden;
							text-overflow: ellipsis;
							// 只要超过宽度就换行，不论中文还是英文
							word-break: break-all;
							//最多展示两行
							display: -webkit-box;
							-webkit-box-orient: vertical;
							-webkit-line-clamp:2;
							height: 70rpx;
						}
						
						&:nth-child(3) {
							font-size: 24rpx;
							color: #AA3128;
							background: url('https://z1.ax1x.com/2023/09/15/pPWQme1.png') no-repeat;
							background-size: 100% 100%;
							width: 135rpx;
							height: 35rpx;
						}
					}
				}
			
				&:nth-child(2n) {
					margin-right: 0upx;
				}
			}
		}
	}
</style>